<!-- 新增、编辑 -->

<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" title="版本信息" width="60%"
        @close="emits('closeDialog')">
        <el-form ref="dialogFormRef" :model="dialogForm">
            <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.name" />
            </el-form-item>
            <el-form-item label="类型" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.category" style="width:200px" />
            </el-form-item>
            <el-form-item label="项目" :label-width="formLabelWidth">
                <el-select v-model="dialogForm.project" placeholder="请选择项目">
                    <el-option label="Mobybox" value="mobybox" />
                    <el-option label="Slots Game" value="slotsgame" />
                </el-select>
            </el-form-item>
            <el-form-item label="缩略图" :label-width="formLabelWidth">
                <el-upload :action="uploadimgUrl" :data="{ project_code: props.dialogForm.project }" :show-file-list="false"
                    :on-success="handleUploaderThumbSuccess" :limit="1" :headers="TOKENT_HEADER" class="avatar-uploader">
                    <img v-if="dialogForm.thumb" :src="dialogForm.thumb_show" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="单价单位" :label-width="formLabelWidth">
                <el-select v-model="dialogForm.unit" placeholder="单价单位">
                    <el-option label="钻石" value="diamond" />
                    <el-option label="金币" value="gold" />
                </el-select>
            </el-form-item>
            <el-form-item label="单价" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.price" style="width:200px" /> <span>{{dialogForm.unit == 'diamond' ? '钻石' : '金币'}}</span>
            </el-form-item>
            <el-form-item label="商品总价" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.total_price" style="width:200px" /> <span>{{dialogForm.unit == 'diamond' ? '钻石' : '金币'}}</span>
            </el-form-item>
            <el-form-item label="活动时间" :label-width="formLabelWidth">
                <el-date-picker v-model="dialogForm.times" type="datetimerange" start-placeholder="开始时间"
                    end-placeholder="结束时间" :default-time="pickerDefaultTime" />
            </el-form-item>
            <el-form-item label="详情图" :label-width="formLabelWidth">
                <el-upload :action="uploadimgUrl" :data="{ project_code:props.dialogForm.project }" :show-file-list="false"
                    :on-success="handleUploaderImgSuccess" :limit="1" :headers="TOKENT_HEADER" class="avatar-uploader">
                    <img v-if="dialogForm.image" :src="dialogForm.image_show" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="详情说明" :label-width="formLabelWidth">
                <TextEditor :content="dialogForm.content" @handleChange="editorHandleChange" />
            </el-form-item>
            <el-form-item label="排序数字" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.rank" style="width:200px" />
            </el-form-item>
            <el-form-item label="是否隐藏" :label-width="formLabelWidth">
                <el-select v-model="dialogForm.is_hide" placeholder="上架状态">
                    <el-option label="否" :value="0" />
                    <el-option label="是" :value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="商品 ID" style="display: none">
                <el-input v-model="dialogForm.product_id" disabled />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emits('cancel')">取消</el-button>
                <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";

import TextEditor from '@/components/WangEditor/index.vue';
import { uploadimgUrl } from "@/api/system/uploadimg";
import { TOKENT_HEADER } from "@/config/api-constant/system";
import { timestamp, pickerDefaultTime } from "@/utils/utils";
const dialogFormRef = ref(null);
const editorValue = ref('');
const props = defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false,
    },
    dialogForm: {
        type: Object,
        default: {
            thumb_show: "",
            product_id: "",
            name: "",
            category: "home",
            content: "",
            image: "",
            unit: "diamond",
            price: "",
            total_price: "",
            start_time: "",
            end_time: "",
            is_hide: "",
            thumb: "",
            times: "",
            image_show: "",
            project: "mobybox",
        },
    },
    btnLoading: {
        type: Boolean,
        default: false,
    },
});
const emits = defineEmits([
    "closeDialog",
    "cancel",
    "submitForm",
    "handleUploaderImgRequest",
    "handleUploaderThumbRequest",
]);

const formLabelWidth = "150px";

//编辑框的值
const editorHandleChange = (param) => {
    editorValue.value = param
};
const submit = (dialogForm) => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            try {
                const param = { ...dialogForm };
                // param.start_time = param.times[0]
                //   ? timestamp(param.times[0].valueOf())
                //   : "";
                // param.end_time = param.times[1]
                //   ? timestamp(param.times[1].valueOf())
                //   : "";
                param.start_time = param.times[0] ? Math.floor(new Date(param.times[0]).getTime() / 1000) : "";
                param.end_time = param.times[1] ? Math.floor(new Date(param.times[1]).getTime() / 1000) : "";
                param.thumb_show = dialogForm.thumb_show;
                param.thumb = dialogForm.thumb;
                // emits("submitForm", param);
                param.content = editorValue.value
                // delete param.product_id;
                // delete param.times;
                // delete param.imageUrl;
                // delete param.thumb_show;
//                console.log(param);
                emits("submitForm", param);
            } catch (error) {
                return false;
//                console.log(error);
            }
        })
        .catch((error) => {
            return false;
//            console.log(error);
        });
};

// const getUploadData = () => {
    
//     return {
//         project_code: "mobybox",
//     };
// };

const handleUploaderThumbSuccess = (res, file) => {
    
    emits("handleUploaderImgRequest", res, "thumb", "thumb_show");
    // console.log(getUploadData().project_code);
};

const handleUploaderImgSuccess = (res) => {
   
    emits("handleUploaderImgRequest", res, "image", "image_show");
    // console.log(getUploadData().project_code);
};

// const handleUploaderThumbSuccess = (res, file) => {

//     emits("handleUploaderImgRequest", res, "thumb", "thumb_show");

//     console.log(thumb);
//     console.log(thumb_show)

// };
// const handleUploaderImgSuccess = (res) => {

//     emits("handleUploaderImgRequest", res, "image", "image_show");
// };
</script>
